@charset "utf-8";

$fontsize:40;
@function rem($px) {
    @return $px/$fontsize * 1rem;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
    header {
        width: 100%;
        height: rem(130);
        background: white;
        position: absolute;
        top: 0;
        .back {
            width: rem(123);
            height: rem(57);
            float: left;
            margin-left: rem(23);
            margin-top: rem(40);
            input[type="button"] {
                width: 100%;
                height: 100%;
                font-size: rem(26);
                border: rem(2) solid #FF9344;
                border-radius: rem(17);
                background: #FFFFFF;
            }
        }
        .title {
            width: rem(125);
            height: rem(27);
            font-size: rem(26);
            margin: 0 auto;
            margin-top: rem(65);
        }
        .selectBar{
            width: rem(158);
            height: rem(54);
            border: rem(2) solid #FF9344;
            line-height: rem(14);
            box-sizing: border-box;
            float: right;
            margin-right: rem(22);
            margin-top: rem(48);
            background: url(../img/sanjiao.png) no-repeat right 5px center;
            background-size: rem(30) rem(16);
            select {
                width: 100%;
                height: 100%;
                text-indent: rem(14);
                font-size: rem(26);
                background: transparent;
                border: none;
                appearance: none;
                -webkit-appearance: none;
                outline: none;
            }
        }
    }
}


section {
    width: 100%;
    position: absolute;
    top: rem(130);
    bottom: 68px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .carous{
        .swiper-container{
            .swiper-wrapper{
                width: rem(704);
                margin: 0 auto;
                .swiper-slide{
                    width: rem(704);
                    div{
                        width: rem(148);
                        height: rem(148);
                        margin-right: rem(33);
                        float: left;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                        p{
                            text-align: center;
                            font-size: rem(26);
                        }
                    }
                    div:last-child{
                        margin-right: 0;
                    }
                }
            }
        }
    }
    .classification{
        margin-bottom: rem(52);
        .classification-title{
            .title-left{
                float: left;
                font-size: rem(30);
                .title-img{
                    width: rem(56);
                    height: rem(44);
                    float: left;
                    padding: 0 rem(7);
                    margin-left: rem(23);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                span{
                    line-height: rem(44);
                    float: left;
                }
            }
            .title-right{
                float: right;
                font-size: rem(24);
                margin-right: rem(23);
                line-height: rem(44);
                p{
                    color: #000;
                }
                i{
                    font-size: rem(24);
                    color: #FF9344;
                }
            }
        }
        .classification-tupian{
            width: rem(702);
            margin: 0 auto;
            .classification-img{
                width: rem(133);
                height: rem(133);
                float: left;
                margin-top: rem(37);
                margin-right: rem(55);
                img{
                    width: 100%;
                    height: 100%;
                    
                }
            }
            .classification-img:last-child{
                margin-right:0;
            }
        }
    }
}


footer {
    width: 100%;
    height: 68px;
    background: white;
    position: absolute;
    bottom: 0;
    a {
        color: #000000;
    }
    ul li {
        width: 25%;
        height: 100%;
        float: left;
        text-align: center;
        padding-top: rem(16);
        box-sizing: border-box;
        i {
            color: transparent;
            -webkit-text-stroke: rem(2) #FF9344;
        }
        .iconfont{
            font-size: rem(60);
        }
        &.active .iconfont{
            color: #FF9344;
        }
        p {
            font-size: 13px;
        }
        &:hover .iconfont {
            color: #FF9344;
        }
    }
}